<template>
  <el-dialog :title="isAdd ? '添加角色':'修改角色'"
             :visible.sync="isShow"
             width="40%"
             @close="cancel">
    <el-form ref="formRef" :rules="formRules" :model="formData" class="info-form"  label-width="110px">
      <el-form-item label="角色名称"
                    prop="name">
        <el-input v-model="formData.name"
                  placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色描述"
                    prop="description">
        <el-input type="textarea"
                  :rows="2"
                  placeholder="请输入角色描述"
                  v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item label="角色权限">
        <!-- 树形控件 树形菜单，树形权限！-->
        <!-- v-if的原因是因为，如果不让树重新生成，那么在树上面操作的节点状态会被遗留！ -->
        <el-tree ref="tree"
                 v-if="isShow"
                 :data="menulist"
                 :props="{label:'title',children:'children'}"
                 node-key="id"
                 show-checkbox
                 :default-expanded-keys="defaultCheck"
                 :default-checked-keys="defaultCheck"></el-tree>
      </el-form-item>
    </el-form>
    <div slot='footer'>
      <el-button @click="cancel"
                 size="small">取消</el-button>
      <el-button type="primary"
                 size="small"
                 @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getInfoData, addData, updateData } from '@/api/system/role'
import { mapActions, mapGetters } from 'vuex'
const defaultItem = {
  name: '', // 角色名称
  description: '', // 描述
  menuids: [] // 菜单ID数组
}
const formRules = {
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 1, max: 20, message: '20个字符以内', trigger: 'blur' }
  ],
  description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }],
  menuids: [{ required: true, message: '请选择菜单权限', trigger: 'blur' }]
}
export default {
  name: 'vInfo',
  data () {
    return {
      formData: { ...defaultItem },
      isShow: false,
      isAdd: true,
      formRules,
      defaultCheck: [], // 默认开始选中
      isStrictly: false // 不是严格模式， 父子是关联的。 父点击了子全部选中，子点击了父也会被勾中
    }
  },
  computed: {
    ...mapGetters('menu', ['menulist'])
  },
  created () {
    !this.menulist.length && this.getAllMenuList()
  },
  methods: {
    ...mapActions({
      getAllRoleList: 'role/getAllRoleList',
      getAllMenuList: 'menu/getAllMenuList'
    }),

    async getInfo (id) {
      this.formData = await getInfoData(id)
      // 取出最底层数据id，设置给树形的
      this.formData.authList.forEach(auth => {
        this.getDefaultCheck(auth, this.defaultCheck)
      })

      this.isAdd = false
      this.isShow = true
    },
    // 递归获取最底层id
    getDefaultCheck (node, arr) {
      if (node.children && node.children.length) {
        node.children.forEach(val => {
          this.getDefaultCheck(val, arr)
        })
      } else {
        return arr.push(node.id)
      }
    },
    async submit () {
      try {
        await this.$refs.formRef.validate()
      } catch (error) {
        return this.$message.warning(this.$t('base.verificationText'))
      }
      const menuids = [
        ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
      ]
      if (!menuids.length) return this.$message.warning('请选择菜单权限')
      this.formData.menuids = menuids

      if (this.isAdd) {
        await addData(this.formData)
        this.$message.success(this.$t('base.addSuccessText'))
      } else {
        await updateData(this.formData)
        this.$message.success(this.$t('base.editSuccessText'))
      }
      this.$emit('update-list')
      // 更新仓库中角色列表数据
      this.getAllRoleList()
      this.cancel()
    },
    cancel () {
      this.isAdd = true
      this.isShow = false
      this.defaultCheck = []
      this.formData = { ...defaultItem }
      this.$refs.formRef.clearValidate()
    }
  }
}
</script>
<style scoped>
</style>
